<template>
	<view class="my-house">
		<view class="title">
			<view class="tab">
				<view :class="{avter:type==0}" @tap="changetype(0)">全部</view>
				<view :class="{avter:type==1}" @tap="changetype(1)">未审核</view>
				<view :class="{avter:type==2}" @tap="changetype(2)">审核中</view>
				<view :class="{avter:type==3}" @tap="changetype(3)">已通过</view>
				<view :class="{avter:type==4}" @tap="changetype(4)">已驳回</view>
			</view>
		</view>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" class="pull-scroll">
			<view class="scroll-f">
				<scroll-view scroll-y @scrolltolower="pullUp" class="scroll-view">
					<view class="list-main">
						<view class="myhouseingcard" v-for="(item,i) in myhousinglist" :key="i" :item="item"
							@tap="goitem(item)">

							<view class="img">
								<image :src="item.house_thumb[0]" mode="aspectFill"></image>
							</view>

							<view>
								<view style="width: 330rpx;">{{item.title}}</view>
								<view class=""
									style="color: #888888;font-size: 24rpx;position: relative;top:10rpx;display: flex;">
									{{item.build&&item.build.title}}
								</view>
							</view>

							<view class="house_status">{{getstatus(item.house_status)}}</view>

						</view>
					</view>
					<uni-load-more v-show="showLoading" :class="{loadMore: true,'loadEmpty': myhousinglist.length === 0}" :status="status"
						:icon-size="12" :content-text="contentText" />
				</scroll-view>
			</view>
		</s-pull-scroll>
	</view>
</template>

<script>
	import {
		picker
	} from "@/util/reuse/picker"
	import {
		imageMixin
	} from "@/util/reuse/imageMixin"
	import myhousingCard from "@/components/myhousing_card.vue"
	import {
		pullDownRefresh
	} from "../util/reuse"
import {
	exitLogin
} from '../util/funcs';
	export default {
		mixins: [picker, imageMixin, pullDownRefresh],
		components: {
			myhousingCard
		},
		data() {
			return {
				showLoading: true,
				type: 0,
				requesting: false,
				// 图片上传相关 start:
				// currentSwiper: 1,
				maxCount: 15,
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多' // nomore
				},
				myhousinglist: [],
				// 图片上传相关 end:


				imageList: [],
				provinceArr: [{
						name: '省份'
					},
					{
						name: '美国'
					},
					{
						name: '巴西'
					},
					{
						name: '日本'
					}
				],
				cityArr: [{
						name: '城市'
					},
					{
						name: '美国'
					},
					{
						name: '巴西'
					},
					{
						name: '日本'
					}
				]
			}
		},
		onShow: function() {
			this.page = 1
			this.status = 'more'
			this.myhousinglist = []
			this.addmyhouse()
		},

		methods: {
			changetype(val) {
				this.page = 1
				this.type = val
				this.status = 'more'
				this.myhousinglist = []
				this.addmyhouse()
			},

			pullDown() {
				this.showLoading = false;
				this.page = 1;
				this.status = 'more'
				this.myhousinglist = [];
				this.addmyhouse()
			},

			pullUp() {
				this.addmyhouse();
			},

			getstatus(val) {
				if (val == 1) {
					return '未审核'
				} else if (val == 2) {
					return '审核中'
				} else if (val == 3) {
					return '已通过'
				} else {
					return '已驳回'
				}
			},

			goitem(item) {
				let obj = JSON.stringify(item);
				uni.navigateTo({
					url: `myhouseingitem/myhouseingitem?item=${obj}`,
					fail: res => {
						console.log(res)
					}
				});
			},

			addmyhouse(cb) {
				if (this.status != 'nomore') {
					this.status = 'loading'
          this.$tokenRequest('/user_house_list',{
            page: this.page,
            pageSize: 10,
            type: this.type
          }).then((res)=>{
            setTimeout(() => {
              this.showLoading=true
            	this.$refs.pullScroll.success();
            }, 500)
            this.page += 1;
            this.myhousinglist = this.myhousinglist.concat(res.data)
            if (res.data.length == 10) {
            	this.status = 'more'
            } else {
            	this.status = 'nomore'
            }
          }).catch((res)=>{
            setTimeout(() => {
              this.showLoading=true
            	this.$refs.pullScroll.success();
            }, 500)
            this.status = 'nomore'
          })
					// uni.request({
					// 	url: `${this.$http}/api/merchant/user_house_list`,
					// 	method: 'POST',
					// 	header: {
					// 		Authorization: 'Bearer ' + this.$store.state.token
					// 	},
					// 	data: {
					// 		page: this.page,
					// 		pageSize: 10,
					// 		type: this.type
					// 	},
					// 	success: (res) => {
					// 		this.showLoading = true;
					// 		console.log('myhouse', res.data, this.page)
					// 		if (res.data.code == 200) {
					// 			setTimeout(() => {
					// 				this.$refs.pullScroll.success();
					// 			}, 500)
					// 			this.page += 1;
					// 			this.myhousinglist = this.myhousinglist.concat(res.data.data)
					// 			if (res.data.data.length == 10) {
					// 				this.status = 'more'
					// 			} else {
					// 				this.status = 'nomore'
					// 			}
					// 		} else if(res.data.code == 402 || res.data.code == 506){
     //            setTimeout(()=>{
     //              exitLogin(res.data.msg);
     //            },1500)
     //          }else {
					// 			setTimeout(() => {
					// 				this.$refs.pullScroll.error();
					// 			}, 500)
					// 			uni.showToast({
					// 				title: res.data.msg,
					// 				position: 'top',
					// 				icon: 'none',
					// 				duration: 2000
					// 			});
					// 			this.status = 'nomore'
					// 		}
					// 		cb && cb
					// 	},
     //        fail: () => {
              
     //        }
					// })
				}
			},

			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif

				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				let _this = this;
				uni.chooseImage({
					sourceType: _this.sourceType[this.sourceTypeIndex],
					sizeType: _this.sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList
						.length : this.count[
							this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res
											.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},

			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},

			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "../assets/styles/global";
	@import "../uview-ui/index.scss";

	.my-house {
		background-color: #f7f8fa;
	}

	.title {
		width: 750rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999999;
		top: var(--window-top);
		// #ifdef H5
		// top: 80rpx;
		// #endif
	}

	.tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-bottom: 10px;

		view {
			height: 40px;
			line-height: 40px;
			margin: 0 20rpx;
		}

		.avter {
			color: #004FBF;
			border-bottom: 6rpx solid #004FBF;
		}
	}

	.house_status {
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		width: 90rpx !important;
		color: #888888 !important;
		font-size: 24rpx !important;
	}

	.myhouseingcard {
		margin: 0 auto 30rpx;
		width: 660rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		position: relative;

		.img {
			width: 130rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		view {
			width: 480rpx;
			font-size: 30rpx;
			color: #222222;
			font-weight: bolder;

			view {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 50rpx;
				line-height: 50rpx;
			}
		}

	}

	.page-main {
		// margin-top: 80rpx;
		min-height: 100vh;
		background-color: $greyBackgroundColor;
		@include center;

		.expand-housing-nav-bar {
			margin-bottom: 30rpx;
		}

		.body-main {
			padding: 30rpx 0;
			width: 100vw;
			min-height: 100%;
			/*background: yellow;*/
			// background-color: $greyBackgroundColor;
			overflow-y: scroll;

			.form-main1,
			.form-main2 {
				margin-bottom: 20px;
				width: 686rpx;
				background-color: #ffffff;
				border-top-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				padding: 30rpx;
				@include bottomGreyBorder;
				border-bottom-color: $blueBorderColor;
				border-width: 4rpx;

				.part1 {
					width: 100%;
					border-radius: 8rpx;
					flex-direction: column;
					display: flex;

					.row-wrapper {
						width: 100%;
						height: 150rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left-part,
						.right-part,
						.whole-part {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: 280rpx;
							height: 112rpx;
							padding-bottom: 14rpx;
							@include bottomGreyBorder;

							.row-name {
								max-width: 250rpx;
								@include ellipsis;
								height: 48rpx;
								font-size: 24rpx;
								line-height: 48rpx;
								color: #969799;
								/*margin-bottom: 8rpx;*/
							}

							.input-wrapper {
								position: relative;
								height: 48rpx;
								width: 100%;

								.uni-input {
									width: 100%;
									font-size: 28rpx;
									line-height: 48rpx;
									color: #3d444c;
									/*color: #969799;*/
									@include ellipsis;

								}

								.triangle-down-arrow {
									position: absolute;
									right: 0;
									top: 50%;
									margin-top: -6rpx;
									width: 12rpx;
									height: 12rpx;
									background-image: url("@/static/images/record/triangle-arrow@3x.png");
									@include contain-no-repeat-center;
								}
							}
						}

						.whole-part {
							width: 622rpx;
							height: 112rpx;
							@include bottomGreyBorder;

						}
					}

					.record-progress {
						width: 609rpx;
						height: 114rpx;
						border: solid 2rpx #ebedf0;
						@include center;

						.status-icon-text {
							width: 170rpx;
							display: flex;
							@include center;
							flex-direction: column;

							.icon {
								height: 38rpx;
								width: 38rpx;
								@include cover-no-repeat-center;
							}

							.text {
								width: 100%;
								@include ellipsis;
								height: 48rpx;
								font-size: 24rpx;
								line-height: 48rpx;
								letter-spacing: 0rpx;
								color: #ba9d61;
								text-align: center;
							}

							.inactive-text {
								color: #969799;
							}

						}

						.right-arrow {
							height: 30rpx;
							width: 30rpx;
							@include contain-no-repeat-center;
							/*background-color: #D8D8D8;*/
						}

						.active-right-arrow {
							background-image: url("@/static/images/record/right-arrow@3x.png");

						}

						.inactive-right-arrow {
							background-image: url("@/static/images/record/inactive-right-arrow@3x.png");

						}
					}
				}

				.part1,
				.part2 {
					.row {
						width: 100%;
						height: 104rpx;
						@include bottomGreyBorder;
						display: flex;
						justify-content: space-between;

						.row-name-left {
							height: 100%;
							align-items: center;
							display: flex;
							width: 190rpx;
							font-size: 28rpx;
						}

						.right-part {
							color: #bdc4ce;
							height: 100%;
							width: 450rpx;
							/*background-color: #D8D8D8;*/
							display: flex;
							align-items: center;

							.uni-input {
								width: 430rpx;
								height: 48rpx;
								font-size: 28rpx;
								color: #969799;

							}

							.input-wrapper {
								width: 100%;

								.uni-input {
									max-width: 80rpx;
									@include ellipsis;
									display: flex;
									align-items: center;
								}
							}
						}
					}

					.double-height-row {
						height: 212rpx;
						display: flex;
						flex-direction: column;
						width: 100%;

						.input-wrapper {
							width: 120rpx !important;
							margin-left: 90rpx;
							display: flex;
							align-items: center;

							&:first-child {
								margin-left: 0rpx;

							}

						}
					}

				}

				.part2 {
					margin-top: 48rpx;

					.part2-title {
						width: 100%;
						height: 48rpx;
						font-weight: bold;
						font-size: 28rpx;
						line-height: 48rpx;
						color: #3d444c;
						margin-bottom: 24rpx;
					}

					.part2-desc {
						width: 442rpx;
						height: 48rpx;
						font-size: 24rpx;
						line-height: 48rpx;
						letter-spacing: 0rpx;
						color: #969799;
					}

					.blue-wide-button {
						width: 448rpx;
						margin-top: 48rpx;
					}

				}

			}

			.form-main2 {
				height: 962rpx;
			}
		}

	}

	.pull-scroll {
		width: 100%;
		padding-top: 50px;
	}

	.scroll-f {
		width: 100%;
		height: calc(100vh - 50px - var(--window-top));
	}

	.scroll-view {
		width: 100%;
		height: 100%;
	}
	
	.list-main{
		padding-top: 30rpx;
	}

	.loadEmpty {
		padding-top: calc(100vh/4);
		height: auto !important;
	}
</style>

<style lang="scss" scoped>
	@import "../assets/styles/global";

	// 内有arrow
	.shared-picker {
		position: relative;

		.triangle-down-arrow,
		.arrow-down-triangle {
			width: 20rpx;
			height: 20rpx;
			@include contain-no-repeat-center;
			background-image: url("@/static/images/arrow.png");
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -10rpx;
		}

		.arrow-down-triangle {
			width: 12rpx;
			height: 12rpx;
			margin-top: -6rpx;
			background-image: url("@/static/images/record/triangle-arrow@3x.png");
		}
	}
</style>
